<template>
	<view style="padding: 24rpx 20rpx;">
		<view class="box box-align-center">
			<!-- <u-search placeholder="请输入内容搜索" class="ml5" v-model="value" @search="search"></u-search> -->
			<u-search shape="round" placeholder="请输入内容搜索" class="ml5" v-model="value" @custom="search"
				@search="search"></u-search>
			<!-- <view class="r-input box box-align-center" style="margin-right: 10rpx;padding: 0 20rpx;">
				<u-image width="18px" height="18px" src="https://www.wytldy.com/file/wxIMG/images/search.png"></u-image>
				<u-input v-model="value" @click="btnBClick()" show-confirmbar clearable class="ml5"></u-input>
			</view> -->
			<view class="filter box box-align-center box-pack-center" @click="handleFilter">
				<u-image width="19px" height="16px" src="https://www.wytldy.com/file/wxIMG/images/filter.png"></u-image>
				<text class="ml5">筛选</text>
			</view>
		</view>
		<view class="list mt20" v-if="lists.length >0">
			<view class="item u-border-bottom mt15" v-for="(item, index) in lists" :key="index">
				<view class="score">
					{{item.result}}
				</view>
				<view class="share" @click="handleShare(item)">
					<image src="../../static/sh.png" mode="" style="width: 40rpx;height: 40rpx;color: #292A2E;"></image>
				</view>
				<view class="student-info box box-align-center" @click="goDetail(item)">
					<u-avatar :src="item.icon"></u-avatar>
					<view class="ml10">
						<view class="box box-align-center">
							<text style="color: #404148;font-size: 26rpx;">{{item.name}}</text>
							<view class="zy ml10">
								{{item.zymc}}
							</view>
						</view>
						<text
							style="color: #5F6572;font-size: 22rpx;margin-top: 3px;">{{timeFommater(item.createTime)}}</text>
					</view>
				</view>
				<view class="content box box-align-center box-pack-between">
					<view class="">
						<text style="color: #292A2E;font-size: 30rpx;font-weight: bold;">{{item.title}}</text>
						<!-- <view class="" style="font-size: 24rpx;color: #5F6572;word-break: break-all;">
							{{item.zzzb}}
						</view>
						<view class="" style="font-size: 24rpx;color: #5F6572;word-break: break-all;">
							{{item.jtly}}
						</view> -->
						<view class="" style="font-size: 24rpx;color: #5F6572;word-break: break-all;">
							{{item.ldmb}}
						</view>
						<!-- <view class="" style="font-size: 24rpx;color: #5F6572;word-break: break-all;">
							{{item.aqygz}}
						</view> -->
					</view>
					<u-image width="120rpx" height="120rpx" :src="item.img">
					</u-image>
				</view>
			</view>
			<!-- <u-loadmore :status="status" /> -->
		</view>
		<noData v-else></noData>
		<u-popup v-model="show" mode="bottom" :closeable="true">
			<scroll-view scroll-y="true" style="height: 800rpx;">
				<view>
					<view class="mt20" style="padding: 40rpx;">
						<view class="box box-align-center box-pack-between">
							<text class="tip">学校</text>
							<view class="box box-align-center" @click="showMoreSchool = !showMoreSchool">
								<text class="mr5 more">{{showMoreSchool?`收起`:`更多`}}</text>
								<u-icon :name="showMoreSchool?`arrow-up`:`arrow-down`"></u-icon>
							</view>
						</view>
						<view class="wrap box box-align-center"
							:style="{display:showMoreSchool == true ? 'flex' : 'none'}">
							<view class="school-list" v-for="(item,index) in schoolList" :key="index"
								:class="{active:item.id == schoolid}" @click="selectSchool(item)">
								{{item.name}}
								<view class="act"></view>
							</view>
						</view>
					</view>
					<view style="padding: 40rpx;border-top:1px solid #E9EDF5;">
						<view class="box box-align-center box-pack-between">
							<text class="tip">专业</text>
							<view class="box box-align-center" @click="showMoreZy = !showMoreZy">
								<text class="mr5 more">{{showMoreZy?`收起`:`更多`}}</text>
								<u-icon :name="showMoreZy?`arrow-up`:`arrow-down`"></u-icon>
							</view>
						</view>
						<view class="wrap box box-align-center" :style="{display:showMoreZy == true ? 'flex' : 'none'}">
							<view class="school-list" v-for="(item,index) in zyList" :key="index"
								:class="{active:item.zydm == zydm}" @click="selectZy(item)">
								{{item.zymc}}
								<view class="act"></view>
							</view>
						</view>
					</view>
					<view style="padding: 40rpx;border-top:1px solid #E9EDF5;">
						<view class="box box-align-center box-pack-between">
							<text class="tip">班级</text>
							<view class="box box-align-center" @click="showMoreClass = !showMoreClass">
								<text class="mr5 more">{{showMoreClass?`收起`:`更多`}}</text>
								<u-icon :name="showMoreClass?`arrow-up`:`arrow-down`"></u-icon>
							</view>
						</view>
						<view class="wrap box box-align-center"
							:style="{display:showMoreClass == true ? 'flex' : 'none'}">
							<view class="school-list" v-for="(item,index) in classList" :key="index"
								:class="{active:item.value == classid}" @click="selectClass(item)">
								{{item.label}}
								<view class="act"></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="confrim-btn box box-align-center box-pack-around">
				<u-button :custom-style="customStyleReset" @click="reset">重置</u-button>
				<u-button :custom-style="customStyle" @click="comfirm">确定</u-button>
			</view>
		</u-popup>

		<u-popup v-model="fxShow" mode="bottom" height="300px" border-radius="24">
			<view class="" style="font-size: 44rpx; text-align: center; margin:20rpx 0 20rpx 0;">
				分享到
			</view>
			<view class="" style="display: flex;">
				<!-- 分享到微信 -->
				<view class="box box-tb box-align-center fx">
					<view class="box box-align-center">
						<view class="mr10 ml10 box box-tb box-align-center">
							<button open-type="share" class="uni_btn">
								<image style="width: 45px;height: 45px;margin-top: 20rpx;"
									src="https://yhykt.oss-cn-beijing.aliyuncs.com/E9B1158464424528B120E668941BC48Cafead635b3db8e9599d7445a2997769.png?Expires=4809034324&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=JNUIIK%2BU73Ee65XW1RniWCQsYX0%3D"
									mode=""></image>
								<view style="font-size: 14px;">微信好友</view>
							</button>
						</view>
					</view>
				</view>
				<!-- 分享到朋友圈 -->
				<!-- <view class="box box-tb box-align-center fx">
					<view class="box box-align-center">
						<view class="mr10 ml10 box box-tb box-align-center">
							<button open-type="share" class="uni_btn" @click="onShareToTimeline">
								<image style="width: 45px;height: 45px;margin-top: 20rpx;"
									src="//image.16pic.com/00/53/02/16pic_5302240_s.jpg" mode=""></image>
								<view style="font-size: 14px;">朋友圈</view>
							</button>
						</view>
					</view>
				</view> -->
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		makeCanvas
	} from "../../common/canvas.js";
	export default {
		data() {
			return {
				fxShow: false,
				fxTitle: '',
				fxImage: '',
				fileList: [],
				value: "",
				status: 'loadmore',
				lists: [],
				page: 0,
				show: false,
				schoolList: [],
				zyList: [],
				classList: [],
				activeValue: "",
				showMoreSchool: true,
				showMoreZy: false,
				showMoreClass: false,
				customStyleReset: {
					width: '222rpx',
				},
				customStyle: {
					width: '450rpx',
					backgroundColor: "#626BF1",
					color: "#fff"
				},
				schoolid: '',
				zydm: '',
				classid: '',
				pages: {
					pageSize: 10,
					pageNum: 1,
					totalPages: 0
				},
				shareTimeline:{},
				shareAppMessage:{
					title:'',
					img:''
				}
			}
		},
		onReachBottom() {
			if (this.pages.totalPages > this.pages.pageNum) {
				this.pages.pageNum += 1
				this.getList()
			}
		},
		onPullDownRefresh() {
			this.pages.pageNum = 1
			this.getList()
			uni.stopPullDownRefresh();
		},
		//1.发送给朋友
		onShareAppMessage(res) {
			if (res.from !== 'button') { 
				console.log(res)
				this.shareAppMessage = {}
			}

			return {
				title: this.shareAppMessage.title?this.shareAppMessage.title:"劳动成果展示",
				path: this.shareAppMessage.title?'/team/LaborDetail/LaborDetail?id='+this.shareAppMessage.ldsjRecordId:'/team/LaborAchievements/LaborAchievements',
				imageUrl: this.shareAppMessage.img?this.shareAppMessage.img:"https://www.wytldy.com/file/wxIMG/images/ld.jpeg",
			}
		},
		//2.分享到朋友圈
		onShareTimeline(res) {
			if (res.from !== 'button') {
				console.log(res)
				this.shareAppMessage = {}
			}
			return {
				title: "劳动成果展示",
				path: '/team/LaborAchievements/LaborAchievements',
				imageUrl: "https://www.wytldy.com/file/wxIMG/images/ld.jpeg",
			}
		},
		
		onLoad() {
			this.getList()
		},
		methods: {
			//时间格式化
			timeFommater(value) {
				var dateee = new Date(value).toJSON();
				var date = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(
					/\.[\d]{3}Z/, '')
				return date;
			},
			//获取劳动成果列表
			getList() {
				if (this.pages.pageNum == 1) {
					this.lists = []
				}
				uni.showToast({
					icon: "loading"
				})
				let opts = {
					url: '/ysjrecords/ldcg',
					method: 'post'
				};
				let params = {
					schoolid: this.schoolid,
					zydm: this.zydm,
					classid: this.classid,
					searchText: this.value,
					pageNum: this.pages.pageNum,
				};
				this.$api.post(opts, params).then(res => {
					console.log(res);
					if (res.code == 0) {
						uni.hideToast()
						this.lists = [...this.lists, ...res.page.list]
						this.pages.totalPages = res.page.pages
						console.log(this.lists, 'this.liststhis.lists')
					}
				})
			},
			btnBClick() {
				this.pages.pageNum = 1
				console.log(1111111);
				// 此处用法为在js中调用，需要写this.$u.throttle()
				this.$u.throttle(this.getList(), 500)
			},
			search() {
				this.pages.pageNum = 1
				this.getList()
			},
			//筛选
			handleFilter() {
				console.log(this.value);
				this.show = true
				this.getSchool()
			},

			//查询学校
			getSchool() {
				let opts = {
					url: '/yschool/pageSchoollist',
					method: 'post'
				};
				let params = {
					searchText: "",
					pageNum: 1,
					pageSize: 6000
				};
				this.$api.post(opts, params).then(res => {
					console.log(res);
					uni.hideToast()
					if (res.code == 0) {
						this.schoolList = res.list.list
					}
				})
			},
			//查询专业
			getZy() {
				let opts = {
					url: '/dzy/list',
					method: 'post'
				};
				let params = {
					schoolid: this.schoolid,
					searchText: "",
				};
				this.$api.post(opts, params).then(res => {
					console.log(res);
					if (res.code == 0) {
						this.zyList = res.list
					}
				})
			},
			//查询班级
			getClass() {
				let opts = {
					url: '/dclass/listBj',
					method: 'post'
				};
				let params = {
					schoolid: this.schoolid,
					zydm: this.zydm,
				};
				this.$api.post(opts, params).then(res => {
					console.log(res);
					if (res.code == 0) {
						this.classList = res.list
					}
				})
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/team/LaborDetail/LaborDetail?id=' + item.ldsjRecordId
				})
			},
			// 分享给朋友
			handleShare(item) {
				console.log(item);
				this.fxShow = true
				this.shareAppMessage = item
			},
			// 分享好友
			onShareToFriend() {
				console.log('分享好友')
				return {
					title: '分享给微信好友标题',
					// path: '/pages/index', // 分享页面的路径
					// imageUrl: '/path/to/your/image.png',
					success: () => {
						console.log('分享给微信好友成功');
					},
					fail: (e) => {
						console.log('分享给微信好友失败', e);
					}
				};
			},
			// 分享朋友圈
			onShareToTimeline() {
				console.log('分享到朋友圈')
				return {
					title: '分享到朋友圈标题',
					// imageUrl: '/path/to/your/image.png',
					success: () => {
						console.log('分享到朋友圈成功');
					},
					fail: (e) => {
						console.log('分享到朋友圈失败', e);
					}
				};
			},

			//选中学校
			selectSchool(item) {
				this.schoolid = item.id
				this.pages.pageNum = 1
				this.getZy()
			},
			selectZy(item) {
				this.zydm = item.zydm
				this.pages.pageNum = 1
				this.getClass()
			},
			selectClass(item) {
				this.pages.pageNum = 1
				this.classid = item.value
			},
			//确定
			comfirm() {
				this.getList()
				this.show = false
			},
			reset() {
				this.schoolid = ''
				this.zydm = ""
				this.classid = ""
				this.value = ""
				this.getList()
				this.show = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.uni_btn {
		background-color: transparent;
		border: none !important;
		outline: none !important;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;

	}

	button::after {
		border: none !important;
	}

	.r-input {
		width: 540rpx;
		height: 76rpx;
		background: #FFFFFF;
		border-radius: 38rpx 0rpx 0rpx 38rpx;
	}

	.filter {
		width: 163rpx;
		height: 76rpx;
		background: #FFFFFF;
		border-radius: 0rpx 38rpx 38rpx 0rpx;
	}

	.list {}

	.item {
		position: relative;
		padding: 22rpx 38rpx 55rpx 38rpx;
		min-height: 330rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 23rpx 46rpx 0rpx rgba(205, 207, 230, 0.18);
		border-radius: 20rpx;
	}

	.zy {
		padding: 0 5px;
		width: auto;
		height: 36rpx;
		line-height: 36rpx;
		background: #F0F1F8;
		border-radius: 18rpx;
		text-align: center;
		font-size: 20rpx;
	}

	.score {
		position: absolute;
		top: 0;
		right: 0;
		width: 91rpx;
		height: 53rpx;
		line-height: 53rpx;
		background: #FFF9EC;
		border-radius: 0rpx 20rpx 0rpx 12rpx;
		color: #FF943B;
		font-size: 26rpx;
		text-align: center;
	}

	.share {
		position: absolute;
		top: 60rpx;
		right: 20rpx;
		border-radius: 0rpx 20rpx 0rpx 12rpx;
		color: #000;
		font-size: 26rpx;
	}

	.tip {
		font-size: 33rpx;
		font-weight: bold;
		color: #000000;
	}

	.more {
		color: #A6AAB7;
		font-size: 26rpx;
	}

	.wrap {
		flex-wrap: wrap;
	}

	.school-list {
		position: relative;
		padding: 0 40rpx;
		margin-right: 28rpx;
		margin-top: 24rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: #F8F9FD;
		border-radius: 14rpx;
		text-align: center;
		color: #5F6572;
		font-size: 28rpx;

		.act {
			display: none;
			position: absolute;
			bottom: 0;
			right: 0;
			width: 25px;
			height: 22px;
		}

		&.active {
			color: #3440FF;
			background: #E4EDFC;
		}

		&.active .act {
			display: block;
			background: url(https://www.wytldy.com/file/wxIMG/images/active.png) repeat center;
		}
	}

	.confrim-btn {
		padding-bottom: 40rpx;
	}
</style>